<template>
  <div class="login-way">
    <el-form
            ref="loginWayForm"
            status-icon
            :model="loginWayForm"
            :rules="loginWayRules">
      <el-form-item prop="username">
        <el-input
                v-model="loginWayForm.username"
                maxlength="11"
                oninput = "value=value.replace(/[^\d]/g,'')"
                placeholder="请输入登陆手机号" />
      </el-form-item>
      <el-form-item class="password-item" prop="password">
        <el-input
                v-model="loginWayForm.password"
                maxlength="20"
                placeholder="请输入密码" show-password
                @keyup.enter.native="handleLoginClick"/>
      </el-form-item>
      <el-form-item class="auto-login-item" style="margin-top: 25px">
        <el-checkbox v-model="loginWayForm.autoLogin">
          保持登录状态
        </el-checkbox>
        <div class="auto-login-btn-box">
          <span>登录即代表同意用户协议</span>
        </div>
      </el-form-item>
    </el-form>
    <div class="login-btn" @click="handleLoginClick">
      登陆
    </div>
  </div>
</template>
<script>
import { mapMutations } from 'vuex'
import { userLogin} from '@/api/user'
import { setToken } from '@/utils/cache';
import { validMobile,validPassword} from '@/validate/register';

export default {
  data () {
    //检验账号
    const validateUsername = (rule, value, callback) => {
      if (!validMobile(value)) {
        callback(new Error("请输入正确的手机号"));
      }
      else {
        callback()
      }
    }

    //检验密码
    const validatePassword = (rule, value, callback) => {
      if (!validPassword(value)) {
        callback(new Error("请输入正确的密码"));
      }
      else {
        callback()
      }
    }

    return {
      loginWayForm: {
        username: '',
        password: '',
        autoLogin: true,
      },
      //检验规则
      loginWayRules:{
        username:[{validator: validateUsername,trigger: 'blur'}],
        password:[{validator: validatePassword,trigger: 'blur'}],
      },
    }
  },
  methods: {
    // 登录
    handleLoginClick () {
      //验证账号密码是否符合要求
      this.$refs.loginWayForm.validate((valid) => {
        if (valid) {
          //检验通过
          userLogin(this.$qs.stringify(this.loginWayForm)).then(result => {
            let { code, data } = result
            if (code === 20000){
              // localstorage存入token
              setToken(data.token)
              // vuex中存入token
              this.setToken(data.token)
              // 关闭弹窗
              this.setShowLogin(false)
              this.$message({
                type: 'success',
                message: '登录成功！'
              })
              // 重载页面
              setTimeout(() => {window.location.reload()},500)
            }
            else if (code === 21019){
              this.$message.error("该账号已被停用！")
            }
            else {
              this.$message.error("账号/密码错误，请重新输入！")
            }
          })
        }
        else {
          //检验不通过
          return false;
        }
      })
    },
    // vuex
    ...mapMutations('login', {
      'setToken': 'SET_TOKEN',
      'setShowLogin': 'SET_SHOW_LOGIN'
    })
  }
}
</script>
<style lang="stylus" scoped>
  @import '~assets/stylus/login-form.styl';
</style>
